使图像拉伸到容器的边缘

Question

我有一个宽度为 75vw 的容器，该容器内有一个图片库。我想要做的是无论屏幕尺寸如何，图像始终具有合适的尺寸以伸展到容器的末端。有没有办法做到这一点。 CSS 中的 Calc 会工作吗？如果是这样，我该如何使用它？谢谢

网站here

figure {
  display: inline-block;
  margin-top: 1rem;
  margin-right: 1rem;
}

.gallery {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
}

<!--Content Start-->
<div class="content">
  <!--Navigation & Header & Messy-->
  <div class="top">
    <div class="left">
      <h1>Jude Wallach</h1>
    </div>
    <div class="right">
      <ul>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </div>
  <!--Gallery Start-->
  <div class="gallery">
    <figure>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/464x464" class="galleryitem"></a>
    </figure>
    <figure>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/464x464" class="galleryitem"></a>
    </figure>
    <figure>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/464x464" class="galleryitem"></a>
    </figure>
    <figure>
      <a href="https://placeholder.com"><img src="http://via.placeholder.com/464x464" class="galleryitem"></a>
    </figure>
  </div>
</div>

Answer 1

我建议使用flex property to set the flex basis。我已将每个 <figure> 设置为 47.5%，以便它们之间始终有 5%，并且还设置了 5% 的顶部边距以模拟每个框周围 space 相等的网格。我还将每张图片设置为填充其父级宽度的 100%。

figure {
  flex: 0 0 47.5%;
  margin: 5% 0 0;
}

figure img {
  width: 100%;
  vertical-align:top;
}

我还建议使用 media queries 以便两列在较小的设备上堆叠。
下面，我使用了一种 "mobile first" 模式。

html,
body {
  margin: 0;
}

a {
  text-decoration: none;
  color: #909090;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0;
}

.content {
  max-width: 75vw;
  margin: 0 auto;
  background-color: rgba(200, 200, 255, .5); /* just for demo purposes */
}

.top {
  text-align: center;
}

#head_links {
  list-style: none;
  margin: 0;
  padding: 0;
}
#head_links li a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.gallery figure {
  margin: 5% 0 0;
}
.gallery figure img {
  display: block;
  width: 100%;
}

@media (min-width: 600px) {
  .top {
    display: flex;
    justify-content: space-between;
    text-align:left;
  }
  .left, .right {
    flex: 0 0 50%;
  }
  #head_links {
    display: flex;
    justify-content: flex-end;
  }
  #head_links li:not(:first-child) {
    margin: 0 0 0 1em;
  }
  .gallery {
    display: flex;
    justify-content: space-between;
    flex-flow:wrap;
  }
  .gallery figure {
    flex: 0 0 47.5%;
  }
}


@media (min-width: 900px) {
  .gallery figure {
    flex: 0 0 30%;
  }
}

@media (min-width: 1200px) {
  .gallery figure {
    flex: 0 0 21.25%;
  }
}

<div class="content">
  <div class="top">
    <div class="left">
      <h1>Jude Wallach</h1>
    </div>
    <div class="right">
      <ul id="head_links">
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </div>
  <div class="gallery">
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
        <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
        <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
    <figure>
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/464x464">
      </a>
    </figure>
  </div>
</div>

为了计算基础百分比，我使用这个公式：

(100 / items per row) - ( (gap percentage desired * gaps per row) / items per row)

例如，每行三个项目：

(100 / 3) - ( 5 * 2 / 3 ) = 30%

每行四个项目：

(100 / 4) - ( 5 * 3 / 4 ) = 21.25%

在您的情况下，flex shorthand 可能是不必要的，而常规的旧 width 可能同样有效。有关详细信息，请参阅 flex-basis 和 width 之间有什么区别？

也有用：Understanding Flexbox: Everything you need to know - particularly the part about flex item properties.

使图像拉伸到容器的边缘

Make images stretch to container's edge

html

css

centering

flexbox